<template>
  <div class="question-detail">
    <div class="items">
      <div 
        class="item"
        v-for="(item, index) in items" 
        :key="index"
        v-show="currentPage == (index + 1)">
        <h3 class="title">{{index+1}}、{{item.subject_title}}</h3>
        <div class="options clearfix">
          <div class="pull-left">
            <el-radio-group 
              v-model="item.checkedAnswer"
              @change="check(index)">
              <el-radio
                v-for="(option, childIndex) in item.options" 
                :key="childIndex"
                :label="childIndex"
                disabled>
                  <span v-show="item.answer == childIndex && item.checkedAnswer == childIndex" class="el-icon-circle-check"></span>
                  <span v-show="item.answer != childIndex && item.checkedAnswer == childIndex" class="el-icon-circle-close"></span>
                  <span v-show="item.checkedAnswer !=null && item.answer == childIndex" class="el-icon-circle-check"></span>
                  <!-- {{['A','B','C', 'D'][childIndex]}}、 -->
                  <span v-if="item.content_type == 1">{{option}}</span>
                  <img class="img" v-else :src="option" alt="">
                </el-radio>
            </el-radio-group>
          </div>
          <div class="pull-left">
            <img class="subject_url" style="height: 300px" v-show="item.content_type == 1" :src="item.subject_url" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="button-group clearfix">
      <el-button @click="prev" :disabled="currentPage == 1" class="pull-left" type="primary">上一题</el-button>
      <el-button @click="next" :disabled="currentPage == max" class="pull-left" type="primary">下一题</el-button>
    </div>
    <div class="score-group">
      <el-button 
        v-for="(item, index) in scores" 
        :key="index"
        size="mini"
        @click="currentPage = (index+1)"
        :type="item.value == 'right' ? 'success' : 'danger'">
        {{index+1}}
      </el-button>
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/question'
export default {
  data() {
    return {
      radio: 3,
      isAuto: false,
      currentPage: 1,
      max: 0,
      items: [],
      scores: [
        {id: 1, value: 'active'},
        {id: 2, value: 'blank'},
        {id: 3, value: 'blank'},
        {id: 4, value: 'blank'},
        {id: 5, value: 'blank'}
      ]
    };
  },
  watch: {
  },
  methods: {
    async getDetail() {
      const paramsData = this.$route.params.id.split('&')
      const res = await detail(paramsData[0])
      if(res.code == '200' && res.data) {
        this.max = res.data.length
        const maps = {A: 0, B: 1, C: 2, D: 3}
        res.data.map(item=>{
          item.title = item.subject_title, //题目标题
          item.answer = maps[item.right_answer], //该题目答案，为options的数组下标
          item.checkedAnswer = maps[item.actual_answer], //客户选择的答案，后台返回默认为null
          item.options = [item.option_a, item.option_b, item.option_c, item.option_d] //选项列表：文字或图片，两种类型
        })
        this.items = res.data
        console.log(this.items)
        this.items.map(({answer, checkedAnswer}, index) => {
          if(checkedAnswer == answer) {
            this.scores[index].value = 'right'
          } else {
            this.scores[index].value = 'error'
          }
        })
      }
    },
    prev() {
      if(this.currentPage > 1) this.currentPage--
    },
    next() {
      if(this.currentPage < this.max) this.currentPage++
    },
    check(index){
      if(this.isAuto && this.currentPage < this.max){
        const checkedAnswer = this.items[index].checkedAnswer
        const answer = this.items[index].answer
        console.log(checkedAnswer , answer)
        if(checkedAnswer == answer) this.currentPage++
      }
    }
  },
  mounted() {
    this.getDetail()
  }
};
</script>
<style lang="scss">
// .question-detail{
//   .el-radio{
//     display: block;
//     margin-bottom: 20px;
//     .img {
//       display: inline-block !important;
//       height: 150px !important;
//       width: 150px !important;
//       vertical-align: top;
//     }
//   }
//   .options{
//     .pull-left{
//       .subject_url{
//         margin-left: 200px;
//         display: block;
//         height: 300px;
//         width: 400px;
//         background: #ccc;
//       }
//     }
//   }
//   .button-group{
//     margin-top: 20px;
//     margin-bottom: 5px;
//     .el-button{
//       margin-right: 5px;
//     }
//   }
//   .score-group{
//     margin-top: 20px;
//   }
//   .el-icon-circle-close{
//     position: absolute;
//     z-index: 999;
//     left: -3px;
//     top: -4px;
//     font-size: 20px;
//     color: #f00;
//     background: #fff;
//   }
//   .el-icon-circle-check{
//     position: absolute;
//     z-index: 999;
//     left: -3px;
//     top: -4px;
//     font-size: 20px;
//     color: #67C23A;
//     background: #fff;
//   }
// }
.question-detail{
  padding-top: 47px;
  padding-left: 50px;
  .el-cascader-node>.el-radio, .el-radio:last-child {
    margin-right: 30px;
  }
  h3{
    margin: 0;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    line-height: 44px;
    margin-bottom: 30px;
  }
  .el-radio-group {
  }
  .el-radio__label {
    display: flex;
    align-items: center;
  }
  .el-radio{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 88px;
    .el-radio__inner{
      width: 20px;
      height: 20px;
    }
    .img {
      display: inline-block !important;
      height: 88px !important;
      width: 88px !important;
      vertical-align: top;
    }
  }
  .options{
    .pull-left{
      .subject_url{
        margin-top: 70px;
        margin-left: 200px;
        display: block;
        height: 300px;
        width: 400px;
        background: #ccc;
      }
    }
  }
  .button-group{
    margin-top: 20px;
    margin-bottom: 5px;
    .el-button{
      margin-right: 5px;
    }
  }
  .score-group{
    margin-top: 30px;
    .el-button{
      margin-right: 10px !important;
      margin-left: 0 !important;
    }
  }
  .el-icon-circle-close{
    position: absolute;
    z-index: 999;
    left: -1px;
    top: 32px;
    font-size: 22px;
    color: #f00;
    background: #fff;
  }
  .el-icon-circle-check{
    position: absolute;
    z-index: 999;
    left: -1px;
    top: 32px;
    font-size: 22px;
    color: #67C23A;
    background: #fff;
  }
}
</style>